<template>
  <div class="mod-prod-info">
    <el-form :model="dataForm" ref="dataForm" label-width="100px">
      <el-form-item label="产品图片">
        <mul-pic-upload v-model="dataForm.imgs" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="0">下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="产品分类" prop="categoryId">
        <el-col :span="8">
          <el-cascader
            expand-trigger="hover"
            :options="category.list"
            :props="category.props"
            v-model="category.selected"
            change-on-select
            @change="handleCategoryChange"
          >
          </el-cascader>
        </el-col>
      </el-form-item>
      <el-form-item label="产品分组">
        <el-col :span="8">
          <el-select
            v-model="dataForm.tagList"
            multiple
            style="width: 250px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in this.tags"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item
        label="产品名称"
        prop="prodName"
        :rules="[{ required: true, message: '产品名称不能为空' }]"
      >
        <el-col :span="8">
          <el-input
            v-model="dataForm.prodName"
            placeholder="产品名称"
            maxlength="50"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="产品卖点" prop="brief">
        <el-col :span="8">
          <el-input
            v-model="dataForm.brief"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="产品卖点"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="配送方式">
        <el-checkbox v-model="dataForm.deliveryMode.hasShopDelivery"
          >商家配送</el-checkbox
        >
        <el-checkbox v-model="dataForm.deliveryMode.hasUserPickUp"
          >用户自提</el-checkbox
        >
      </el-form-item>
      <prod-transport
        v-show="dataForm.deliveryMode.hasShopDelivery"
        v-model="dataForm.deliveryTemplateId"
      ></prod-transport>
      <sku-tag ref="skuTag" @change="skuTagChangeSkuHandler"></sku-tag>
      <sku-table
        ref="skuTable"
        v-model="dataForm.skuList"
        :prodName.sync="dataForm.prodName"
      ></sku-table>

      <el-form-item label="产品详情" prop="content">
        <tiny-mce
          v-model="dataForm.content"
          ref="content"
          style="width:1000px"
        ></tiny-mce>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit()">确定 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { treeDataTranslate, idList } from "@/utils";
import MulPicUpload from "@/components/mul-pic-upload";
import ProdTransport from "./prod-transport";
import SkuTag from "./sku-tag";
import SkuTable from "./sku-table";
import TinyMce from "@/components/tiny-mce";

export default {
  data() {
    return {
      // 分类树展示与回显
      category: {
        list: [],
        selected: [],
        props: {
          value: "categoryId",
          label: "categoryName"
        }
      },
      // 规格列表
      dataForm: {
        prodName: "",
        brief: "",
        pic: "",
        imgs: "",
        oriPrice: 0,
        categoryId: 0,
        prodId: 0,
        skuList: [],
        tagList: [],
        content: "",
        status: 1,
        deliveryMode: {
          hasShopDelivery: false,
          hasUserPickUp: false
        },
        deliveryTemplateId: null
      },
      tags: [],
      resourcesUrl: window.SITE_CONFIG.resourcesUrl
    };
  },
  components: {
    MulPicUpload,
    ProdTransport,
    TinyMce,
    SkuTag,
    SkuTable
  },
  computed: {
    defalutSku() {
      return this.$store.state.prod.defalutSku;
    }
  },
  activated() {
    this.dataForm.prodId = this.$route.query.prodId;
    this.getDataList();
  },
  methods: {
    // 获取分类数据
    getDataList() {
      this.getTagList();
      this.getCategoryList().then(() => {
        if (this.dataForm.prodId) {
          // 获取产品数据
          this.$http({
            url: this.$http.adornUrl(
              `/product-service/prod/prod/info/${this.dataForm.prodId}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            this.dataForm = data;
            this.dataForm.deliveryMode = JSON.parse(data.deliveryMode);
            this.$refs.skuTag.init(data.skuList);
            this.$refs.skuTable.init();
            this.category.selected = idList(
              this.category.list,
              this.dataForm.categoryId,
              "categoryId",
              "children"
            ).reverse();
            this.dataForm.tagList = data.tagList;
          });
        } else {
          this.$nextTick(() => {
            this.$refs["dataForm"].resetFields();
            this.$refs.skuTag.init();
            this.dataForm.pic = "";
            this.dataForm.imgs = "";
          });
        }
      });
    },
    // 获取分类信息
    getCategoryList() {
      return this.$http({
        url: this.$http.adornUrl("/product-service/prod/category/table"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.category.list = treeDataTranslate(data, "categoryId", "parentId");
      });
    },
    // 选择分类改变事件
    handleCategoryChange(val) {
      this.dataForm.categoryId = val[val.length - 1];
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (!valid) {
          return;
        }
        if (!this.dataForm.imgs) {
          this.errorMsg("请选择图片上传");
          return;
        }
        if (!this.dataForm.deliveryMode) {
          this.errorMsg("请选择配送方式");
          return;
        }
        if (
          this.dataForm.deliveryMode.hasShopDelivery &&
          !this.dataForm.deliveryTemplateId
        ) {
          this.errorMsg("请选择运费模板");
          return;
        }
        let param = Object.assign({}, this.dataForm);
        // 设置价格和库存
        this.paramSetPriceAndStocks(param);

        param.deliveryMode = undefined;
        param.deliveryModeVo = this.dataForm.deliveryMode;
        // 商品主图
        param.pic = this.dataForm.imgs.split(",")[0];
        this.$http({
          url: this.$http.adornUrl(`/product-service/prod/prod`),
          method: param.prodId ? "put" : "post",
          data: this.$http.adornData(param)
        }).then(({ data }) => {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.visible = false;
              this.$store.commit("common/removeMainActiveTab");
              this.$router.push({ name: "prod-prodList" });
              this.$emit("refreshDataList");
            }
          });
        });
      });
    },
    paramSetPriceAndStocks(param) {
      // 获取规格属性信息
      // param.skuList = this.$refs.prodSpec.getTableSpecData()
      // 商品库存
      param.totalStocks = 0;
      // 商品价格
      param.price = 0;
      // 商品原价
      param.oriPrice = 0;
      // 商品实际库存
      for (let i = 0; i < param.skuList.length; i++) {
        const element = param.skuList[i];
        if (element.status !== 1) {
          continue;
        }
        if (param.price === 0) {
          param.price = element.price ? Number.parseFloat(element.price) : 0;
        }
        // 商品价格为最低价的那件商品的价格
        param.price = Math.min(param.price, element.price);
        if (param.price === element.price) {
          param.oriPrice = element.oriPrice
            ? Number.parseFloat(element.oriPrice)
            : 0;
        }
        param.totalStocks += element.stocks
          ? Number.parseInt(element.stocks)
          : 0;
      }
      // 如果sku没有商品名称，则使用商品的商品名称
      if (param.skuList.length === 1) {
        param.skuList[0].prodName = this.dataForm.prodName;
      }
    },
    skuTagChangeSkuHandler(skuList) {
      const prodName = this.dataForm.prodName;
      skuList.forEach(sku => {
        if (sku.properties) {
          sku.skuName = "";
          let properties = sku.properties.split(";");
          for (const propertiesKey in properties) {
            sku.skuName += properties[propertiesKey].split(":")[1] + " ";
          }
          sku.prodName = prodName + " " + sku.skuName;
        }
      });
      this.dataForm.skuList = skuList;
    },
    errorMsg(message) {
      this.$message({
        message: message,
        type: "error",
        duration: 1500
      });
    },
    // 获取所有的分组信息
    getTagList() {
      this.$http({
        url: this.$http.adornUrl("/product-service/prod/prodTag/listTagList"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.tags = data;
      });
    }
  }
};
</script>
